<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2023-12-29 14:36:44
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 单行选择
   selectmode:单选single 复选multiple
 * @FilePath: \basic-module\components\customSelect\customSelect.vue
-->
<template>
  <view class="select-container">
    <list v-if="listShow" @change="change" ref="child" :param="param.match" :title="param.label"
      :selectlist.sync="currentList" :handler="param.handler">
      <!-- <template v-slot:default="{ item, index }">
        <block v-if="param.direction == 'horizontal'">
          <view v-if="param.showOrder">[{{ index + 1 }}]</view>
          <view>{{ item.name }}</view>
        </block>
        <block v-if="param.direction == 'vertical'">
          <avatar shape="circle" :size="45" :src="item.headimg" fit='aspectFill'></avatar>
          <view class="username">{{ item.username }}</view>
        </block>
      </template> -->
    </list>
    <view v-if="param.direction == 'horizontal'" :class="param.direction" @click="open">
      <view class="label">{{ param.label }}</view>
      <view class="select">
        <view class="select-inner" :class="{ selected: selected.length > 0 }">
          <view v-if="selected.length > 0">
            <view class="txt-inner" v-for="item in selected" :key="item.id">{{ item.name }}</view>
          </view>
          <view v-else>请选择</view>
        </view>
        <image class="arrow-right-icon" model="aspectFit" src="../../static/img/icon/arrow-right.png"></image>
      </view>
    </view>
    <view v-if="param.direction == 'vertical'" :class="param.direction">
      <view class="label">{{ param.label }}</view>
      <view class="list">
        <block v-for="(item, index) in currentList" :key="index">
          <view class="single" v-if="item.checked">
            <avatar shape="circle" :src="item.headimg" :size="50"></avatar>
            <image @click.stop="del(item)" class="delete-icon" mode="aspectFit" src="../../static/img/icon/delete.png">
            </image>
            <view v-if="param.name" class="nickname">{{ item[param.name] }}</view>
          </view>
        </block>
        <image @click="open" class="add-icon" mode="aspectFit" src="../../static/img/icon/person-add.png"></image>
      </view>
    </view>
  </view>
</template>

<script>
import list from "@/components/select/list";
import avatar from "@/components/avatar/avatar";

export default {
  name: "lSelect",
  components: { list, avatar },
  props: {
    param: {
      type: Object,
      default: () => ({}),
    },
    mark: {
      type: String,
      default: "",
    },
    list: [String, Array, Number],
  },
  data() {
    return {
      currentList: this.param.list,
      listShow: false
    };
  },
  mounted() {
    this.currentList.map((v) => {
      if (this.list && this.list.length > 0) {
        this.$set(v, "checked", this.list.includes(v[this.param.match]));
      } else {
        this.$set(v, "checked", this.list == v[this.param.match]);
      }
    });
    setTimeout(() => {
      this.listShow = true;
    }, 100);
  },
  computed: {
    selected() {
      return this.currentList.filter((v) => v.checked == true);
    },
  },
  watch: {
    selected(v) {
      // let arr = [];
      // v.map((x) => arr.push(x[this.param.match]));
      // this.$emit("update:list", arr.join(","));
    },
  },
  methods: {
    change(e) {
      this.currentList.map(v => this.$set(v, "checked", e.includes(v[this.param.match])));
      this.$emit("change", { key: this.mark, value: e.join(",") });
    },
    open() {
      this.$refs.child.open();
    },
    del(v) {
      this.listShow = false;
      this.currentList.map((x) => {
        if (v[this.param.match] == x[this.param.match]) { x.checked = false }
      });
      this.param.handler.selectAll = this.currentList.every((v) => v.checked == true);
      setTimeout(() => {
        this.listShow = true;
      }, 100);
      this.$emit("change", { key: this.mark, value: this.currentList.filter(a => a.checked == true).map(a => { return a[this.param.match] }).join(",") });
    },
  },
};
</script>

<style lang="less" scoped>
.select-container {
  .flex();
  background: #ffffff;

  .label {
    width: 180upx;
    color: #888990;
  }

  .select {
    .flex(row, flex-end);
    padding-left: 20upx;
    width: calc(100% - 180upx);
  }

  .select-inner {
    .flex(row, flex-end);
    padding-right: 20upx;
    margin-top: -6upx;
    color: #c7c7c8;
  }

  .selected {
    color: #1d256e;
  }
}

.horizontal {
  .flex();
  padding: 40upx;
  width: 100%;
}

.vertical {
  padding: 30upx 40upx;
  width: 100%;

  .label {
    margin-bottom: 20upx;
  }

  .list {
    .flex(row, flex-start, flex-start, wrap);

    .single {
      position: relative;
      margin-bottom: 20upx;
      margin-right: 20upx;

      .delete-icon {
        position: absolute;
        top: 0;
        right: -10upx;
      }
    }
  }
}

.username {
  margin-left: 20upx;
  font-size: 34upx;
  color: #1d256e;
  text-align: center;
}

.nickname {
  margin-top: 10upx;
  font-size: 24upx;
  color: #888990;
  text-align: center;
}

.add-icon {
  width: 100upx;
  height: 100upx;
}

.delete-icon {
  width: 34upx;
  height: 34upx;
}
</style>
